<template>
	<qh-page-view title="福气值">
		<view class="recharge" v-if="!empty">
			<view class="top-box">
				<image class="top-bg" v-if="type==3" src="https://safood.supplyocta.com/Public/MallSmallApp/plus-bg.png"></image>
				<image class="top-bg" v-else-if="type==1||type==2" src="https://safood.supplyocta.com/Public/MallSmallApp/ordinary-bg.png"></image>
				<view class="top-content">
					<block v-if="type==3">
						<view class="top-left">
							<view>
								<view class="plus-user-type">PLUS会员</view>
								<view class="plus-user-name">{{user_info.nickname}}</view>
								<view class="plus-user-name">到期时间：{{plus_day}}</view>
							</view>
							<view class="plus-balance-box">
								<view class="plus-balance-text">余额</view>
								<view class="plus-balance">{{vip_info?vip_info.balance:'0.00'}}元</view>
							</view>
						</view>
					</block>
					<block v-else-if="type==1||type==2">
						<view class="top-left">
							<view>
								<view class="ordinary-user-name">{{user_info.nickname}}</view>
								<view v-if="vip_info && vip_info.user_type == 3" class="vip-id">
									<image class="vip-iden" src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1729071052670f87ccc170e.png"></image>
									<view class="vip-grade-name">{{vip_info.grade_name}}</view>
								</view>
								<!-- <view v-if="vip_info && vip_info.user_type == 3" class="vip-id">{{vip_info.grade_name}}</view> -->
								<!-- <view v-if="user_info.grade_name" class="ordinary-user-type">{{user_info.grade_name}}</view> -->
								<view v-else class="ordinary-user-type">普通用户</view>
							</view>
							<view class="ordinary-balance-box">
								<view class="ordinary-balance-text">福气值</view>
								<view class="ordinary-balance">{{vip_info?vip_info.balance:'0.00'}}</view>
							</view>
						</view>
					</block>
				</view>
			</view>
			<view v-if="vip_recharge_activity.length||plus_recharge_activity.length||custom_recharge==1">
				<view class="recharge-list" v-if="vip_recharge_activity.length&&recharge_type==1">
					<view class="activity">常规活动</view>
					<view class="flex-line">
						<view class="recharge-con" v-for="(item, index) in vip_recharge_activity" :key="index">
							<view :class="'recharge-item' + (vip_index==index?' active':'')" @tap.stop="chooseActivity(index,1,item.aging_repay)">
								<image v-if="vip_index==index" class="active-img" src="/static/images/choose.png"></image>
								<view class="money">充{{item.recharge_money}}元</view>
								<view class="present">送{{item.give_money}}元</view>
								<!-- <view class="present-title" v-if="item.aging_repay != 1">直接到账</view> -->
								<view class="present-title" v-if='item.aging_repay == 1'>
									赠送金额分{{item.active_aging_time}}期到账</view>
							</view>
						</view>
					</view>
				</view>
				<view class="recharge-list" v-if="plus_recharge_activity.length">
					<view class="activity" v-if="type==1">开通PLUS会员</view>
					<view class="activity" v-else>续费PLUS会员</view>
					<view class="flex-line">
						<view class="recharge-con" v-for="(item, index) in plus_recharge_activity" :key="index">
							<view :class="'recharge-item' + (plus_index==index?' active':'')" @tap.stop="chooseActivity(index,2,item.aging_repay)">
								<image v-if="plus_index==index" class="active-img" src="/static/images/choose.png">
								</image>
								<view class="money">充{{item.recharge_money}}元</view>
								<view class="present">送{{item.give_money}}元</view>
								<!-- <view class="present-title" v-if="item.aging_repay != 1">直接到账</view> -->
								<view class="present-title" v-if="item.aging_repay == 1">
									赠送金额分{{item.active_aging_time}}期到账</view>
							</view>
							<view class="time">送{{item.time}}天PLUS会员</view>
						</view>
					</view>
				</view>
				<view class="recharge-list" v-if="custom_recharge==1&&recharge_type==1">
					<view class="activity">自定义金额</view>
					<view class="mypaymoney">
						<view class="mypay">￥</view>
						<input type="digit" @input="bindMoneyInput" placeholder-class="pl" placeholder="请输入金额" :value="money"></input>
					</view>
				</view>
				<view class="submitpay" @tap="placeOrder" :style="buttonStyle">充值</view>
			</view>
			<view class="not-available" v-else>暂未开启小程序充值，请到门店进行充值</view>

			<!-- 弹出层 -->
			<view class="alert-mask" v-if="showDetails" @tap="detailsClose">
				<view class="alert-com" @tap.stop='catchTap'>
					<view class="alert-title">
						<text>活动详情</text>
						<text class="qh-rt-single qh-rt-a-ziyuan1 alert-close-icon" @tap.stop="detailsClose"></text>
					</view>
					<view class="Inventory-Box">
						<view class="list-child">
							<view class="lable">充值金额：</view>
							<view class="content">￥{{showDetailsData.recharge_money}}</view>
						</view>
						<view class="list-child">
							<view class="lable">赠送金额：</view>
							<view class="content">￥{{showDetailsData.give_money}}</view>
						</view>
						<view class="list-child">
							<view class="lable">到账方式：</view>
							<view class="content">{{showDetailsData.aging_repay_name}}</view>
						</view>
						<view class="list-child" v-if="showDetailsData.aging_repay == 1">
							<view class="lable">分期期数：</view>
							<view class="content">{{showDetailsData.active_aging_time}}期</view>
						</view>
						<view class="list-child" v-if="showDetailsData.aging_repay == 1">
							<view class="lable">期数间隔：</view>
							<view class="content">{{showDetailsData.aging_time+showDetailsData.aging_cycle_name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="not-available" v-else>暂无充值活动</view>
	</qh-page-view>
</template>

<script>
	export default {
		data() {
			return {
				recharge_type: 1, // 类型 1.常规充值 2.开通或续费plus会员充值
				user_info: [], // 用户信息
				vip_info: {}, // 会员信息
				vip_recharge_activity: [], // 普通充值活动
				plus_recharge_activity: [], // 成为plus活动
				custom_recharge: 2, // 自定义充值 1.开启 2.关闭
				money: '', // 自定义充值金额
				recharge_id: '', // 充值活动id
				type: '', // 类型   1.普通会员 2.过期plus 3.正常plus
				empty: false,
				vip_index: -1,
				plus_index: -1,
				plus_day: "",
				canClick: false,
				showDetails: false,
				showDetailsData: {}, //活动弹框的数据
				scene_type: 4,
			};
		},
		computed: {
			buttonStyle() {
				return `bottom: ${10 + this.$store.bottomHeight}rpx`;
			},
		},
		// 加载页面
		onLoad(options) {
			// #ifdef MP-ALIPAY
			if (JSON.stringify(options) == '{}') {
				options = my.getLaunchOptionsSync().query;
			}
			// #endif
			if (options && (options.store_id)) {
				this.$store.store_id = options.store_id;
			}

			if (options.recharge_type) {
				this.setData({
					recharge_type: options.recharge_type
				});
			}
			if (options.scene == 1) {
				this.scene_type = 7;
			}
		},
		async onShow() {
			await this.$onLaunched;
			this.getRechargeList();
		},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage(res) {
			return {
				title: '会员充值',
				path: `/pages/mine/recharge/recharge?store_id=${this.$store.store_id}&share_uid=${getApp().globalData.XcxData.userInfo.uid}`,
			};
		},
		methods: {
			// 获取充值活动，用户信息
			async getRechargeList() {
				const res = await this.$request('SmallProgramApi/Recharge/getRechargeList');
				if (res.status == 1) {
					this.user_info = res.user_info;
					this.vip_info = res.vip_info;
					this.vip_recharge_activity = res.recharge_activity.vip_recharge_activity ? res.recharge_activity.vip_recharge_activity : [];
					this.plus_recharge_activity = res.recharge_activity.plus_recharge_activity ? res.recharge_activity.plus_recharge_activity : [];
					this.custom_recharge = res.custom_recharge;
					this.type = res.vip_type;
					this.plus_day = res.plus_day;

					getApp().globalData.XcxData.userInfo = {
						...getApp().globalData.XcxData.userInfo,
						...res.user_info,
					}
				} else {
					this.empty = true;
				}
			},

			// 选择充值活动
			chooseActivity(index, type, flag) {
				let showDetailsData = {}
				let showDetails = true;
				if (type == 1) {
					var plus_index = -1;
					if (index == this.vip_index) {
						var vip_index = -1;
						var recharge_id = 0;
						showDetails = false;
					} else {
						var vip_index = index;
						var recharge_id = this.vip_recharge_activity[index].id;
						showDetailsData = this.vip_recharge_activity[index];
					}
				} else {
					var vip_index = -1;

					if (index == this.plus_index) {
						var plus_index = -1;
						var recharge_id = 0;
						showDetails = false;
					} else {
						var plus_index = index;
						var recharge_id = this.plus_recharge_activity[index].id;
						showDetailsData = this.plus_recharge_activity[index]
					}
				}

				this.setData({
					recharge_id: recharge_id,
					vip_index: vip_index,
					plus_index: plus_index,
					money: '',
					showDetails: flag == 1 ? showDetails : false,
					showDetailsData: showDetailsData
				});
			},

			detailsClose() {
				this.setData({
					showDetails: false,
				})
			},

			catchTap() {},

			// 自定义金额输入
			bindMoneyInput: function(e) {
				var money = e.detail.value;
				this.setData({
					money: money,
					recharge_id: '',
					vip_index: -1,
					plus_index: -1
				});
			},

			// 下单
			async placeOrder() {
				// 判断会员
				if (!this.vip_info) return uni.showModal({
					title: '提示',
					content: '暂未绑定会员卡？',
					showCancel: true,
					confirmText: '去绑定',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '../card/card'
							});
						}
					}
				});
				// 判断充值活动
				if (!this.recharge_id || this.recharge_id == 0) {
					// 判断金额
					if (this.money.trim() == '') return uni.showToast({
						title: '请输入充值金额',
						icon: 'none',
						duration: 1000
					});

					if (parseFloat(this.money) < 0.01) return uni.showToast({
						title: '请输入正确的充值金额',
						icon: 'none',
						duration: 1000
					});
				}
				// 提交订单
				const res = await this.$request('SmallProgramApi/Recharge/placeOrder', {
					recharge_id: this.recharge_id,
					money: this.money,
					scene_type: this.scene_type,
				})
				if (res.status == 1) {
					// #ifdef MP-WEIXIN
					this.WxPay(res.order_id, res.pay_data);
					// #endif
					// #ifdef MP-ALIPAY
					this.AliPay(res.order_id, res.pay_data);
					// #endif
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1200
					});
				}
			},

			/**
			 * 微信支付
			 * @param int order_id 充值记录id
			 * @param array pay_data 微信支付参数
			 **/
			WxPay(order_id, pay_data) {
				// 调起支付
				uni.requestPayment({
					timeStamp: pay_data.data.timeStamp,
					nonceStr: pay_data.data.nonceStr,
					package: pay_data.data.package,
					signType: pay_data.data.signType,
					paySign: pay_data.data.paySign,
					success: (res) => {
						if (res.errMsg == 'requestPayment:ok') {
							// 查询订单支付状态
							this.searchOrder(order_id);
						}
					},
					complete: () => {
						this.canClick = true;
					}
				});
			},

			/**
			 * 支付宝支付
			 *  @param int order_id 充值记录id
			 *  @param array pay_data 微信支付参数
			 * */
			AliPay(order_id, pay_data) {
				// 调起支付
				my.tradePay({
					tradeNO: pay_data.data.trade_no,
					success: (res) => {
						if (res.errMsg == 'requestPayment:ok') {
							// 查询订单支付状态
							this.searchOrder(order_id);
						}
					},
					complete: () => {
						this.canClick = true;
					}
				});
			},
			//查询订单
			searchOrder(order_id) {
				uni.showLoading({
					title: '订单信息查询中',
					// #ifndef MP-ALIPAY
					mask: true,
					// #endif
				});
				let time = 0;
				let timer = setInterval(async () => {
					time++;
					if (time <= 10) {
						const {
							status,
							message
						} = await this.$request('SmallProgramApi/Recharge/queryOrder', {
							order_id: order_id
						}, false);
						if (status == 1) {
							// 支付成功
							clearInterval(timer); // 清除定时器
							uni.hideLoading();
							uni.showToast({
								title: '充值成功',
								duration: 1000,
								mask: true
							});
							this.getRechargeList();
						}
					} else {
						uni.hideLoading();
						clearInterval(timer);
						uni.showModal({
							title: '提示',
							content: "充值失败",
							showCancel: false,
						});
					}
				}, 2000);
			},
		}
	};
</script>
<style>
	@import "./recharge.css";
</style>
